<template>
  <div>
    <a-date-picker ref="year" mode="year" v-if="dataType=='year'" @focus="yearFocus" :value="renderDateString" @panelChange="changeYear"  format="YYYY"  @change="onChange" v-bind="$attrs"></a-date-picker>
    <a-month-picker v-if="dataType=='month'" :value="renderDateString"  format="YYYY-MM" @change="onChange" v-bind="$attrs"></a-month-picker>
    <a-date-picker v-if="dataType=='date'" :value="renderDateString"  format="YYYY-MM-DD" v-bind="$attrs"  @change="onChange"></a-date-picker>
    <a-date-picker v-if="dataType=='dateTime'"  showTime :value="renderDateString" format="YYYY-MM-DD HH:mm:ss" @change="onChange" v-bind="$attrs"></a-date-picker>
  </div>
</template>
<script>
  import moment from 'moment'
  export default {
    name: 'xlData',
    data () {
      return {
        dateEmit:''
      }
    },
    props: {
      value: undefined,
      dataType:{
        type:String,
        default:'date'
      }
    },
    methods: {
      moment,
      onChange(mom,dateStr){
        this.$emit('change', dateStr);
      },
      yearFocus(){
        this.$nextTick(_=>{
          this.$refs.year.open = true
        })
      },
      changeYear(date){
        this.dateEmit = date ? moment(date).format('YYYY') : ''
        this.$emit('change', this.dateEmit)
        this.$nextTick(_=>{
          this.$refs.year.open = false
        })
      }
    },
    computed: {
      renderDateString () {
        return this.value ? moment(this.value).format('YYYY-MM-DD HH:mm:ss') : ''
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>
<style scoped lang="less">
  .ant-calendar-picker{
    width: 100%;
  }
</style>
